<template>
	<view class="">
		<view class="bg-white padding-20">
			<view
				class="gift-bag-item mb-0" 
				:style="{background: cardData.status===2?cardData.bgColor:'#cdcbcb',color:cardData.status===6?'#3a3737':''}"
			>
				<view class="flex flex--row">
					<text>{{cardData.cardItemName}}<text class="ml-20" v-if="cardData.status===6">(已禁用)</text></text>
					<text class="fsize-24 mt-10">含{{cardData.projectCount}}种明细 · 共{{cardData.nums}}次 · 剩余{{cardData.balance}}</text>
				</view>
				<text class="fsize-24">有效期:{{cardData.validityDateText}}</text>
			</view>
		</view>
		<view class="my-list">
			<u-list :height="swiperHeight" v-if="cardData.items.length > 0">
				<view 
					class="flex bg-white padding-20 mt-20 border-radius-10" 
					v-for="(item, index) in cardData.items" 
					:key="item.id" 
					@click="onRadio(index)"
				>
					<u-avatar :src="item.imageUrl" default-url="/static/logo.png" size="60" shape="square"/>
					<view class="ml-20 flex flex--row">
						<text>{{item.name}}</text>
						<text class="fsize-24 line-gray">共{{item.nums}}次 · 剩余{{item.balance}}次</text>
						<view class="flex justify-between align-center">
							<view class="mt-10">
								<text class="fsize-22 line-red">￥</text>
								<text class="fsize-32 line-red">{{item.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data(){
			return {
				cardData:{
					items:[]
				}
			}
		},
		onLoad(opt) {
			this.getDetail(opt.id)
		},
		methods: {
			getDetail(id){
				this.$reqJsonPost('UserCardsDetails', {id: id}).then(res=>{
					this.cardData = res.data.data
				})
			}
		}
	}
</script>

<style>
</style>